<template>
  <a-layout>
    <a-layout-content>
      <a-modal
        v-model:visible="isModalVisible"
        title="添加碳排因子"
        @cancel="handleCancel"
        @ok="handleSubmit"
        :width="800"
        Set
        modal
        width
      >
        <a-form layout="vertical">
          <a-row gutter="{20}">
            <!-- Increased gutter for more spacing -->
            <a-col span="8">
              <a-form-item label="一级类型">
                <a-select
                  v-model="form.primaryType"
                  placeholder="选择一级类型"
                  style="width: 95%"
                >
                  <a-select-option value="类型1">类型1</a-select-option>
                  <a-select-option value="类型2">类型2</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="二级类型">
                <a-select
                  v-model="form.secondaryType"
                  placeholder="选择二级类型"
                  style="width: 95%"
                >
                  <a-select-option
                    v-for="item in secondaryOptions"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="三级类型">
                <a-select
                  v-model="form.tertiaryType"
                  placeholder="选择三级类型"
                  style="width: 95%"
                >
                  <a-select-option
                    v-for="item in tertiaryOptions"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-divider dashed>基本信息</a-divider>
          <a-row gutter="{20}">
            <a-col span="8">
              <a-form-item label="因子名称">
                <a-input
                  v-model="form.factorName"
                  placeholder="输入因子名称"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="规格型号">
                <a-input
                  v-model="form.specification"
                  placeholder="输入规格型号"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="适用行业">
                <a-input
                  v-model="form.industry"
                  placeholder="输入适用行业"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row gutter="{20}">
            <!-- Increased gutter for more spacing -->
            <a-col span="8">
              <a-form-item label="适用场景">
                <a-input
                  v-model="form.scene"
                  placeholder="输入适用场景"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="二氧化碳当量">
                <a-input
                  v-model="form.co2Equivalent"
                  placeholder="输入二氧化碳当量"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="因子单位">
                <a-select
                  v-model="form.factorUnit"
                  placeholder="选择因子单位"
                  style="width: 95%"
                >
                  <a-select-option value="kg CO2e/unit">kg CO2e/unit</a-select-option>
                  <a-select-option value="等">等</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <a-divider dashed>数据来源</a-divider>
          <a-row gutter="{20}">
            <!-- Increased gutter for more spacing -->
            <a-col span="8">
              <a-form-item label="文献类型">
                <a-select
                  v-model="form.literatureType"
                  placeholder="选择文献类型"
                  style="width: 95%"
                >
                  <a-select-option value="电子公告">电子公告</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="来源类型">
                <a-select
                  v-model="form.sourceType"
                  placeholder="选择来源类型"
                  style="width: 95%"
                >
                  <a-select-option value="区域排放因子">区域排放因子</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="发布年份">
                <a-input
                  v-model="form.publishYear"
                  placeholder="输入发布年份"
                  style="width: 95%"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row gutter="{20}">
            <!-- Increased gutter for more spacing -->
            <a-col span="8">
              <a-form-item label="发布国家/组织">
                <a-select
                  v-model="form.publishCountry"
                  placeholder="选择国家/组织"
                  style="width: 95%"
                >
                  <a-select-option value="China">China</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>

      <a-card title="碳排因子管理" style="margin-top: 1px">
        <a-form layout="inline">
          <a-form-item>
            <a-input
              v-model="searchFactorName"
              placeholder="输入碳排因子名称"
              style="width: 300px"
            />
            <a-button type="primary" @click="handleQuery" style="margin-left: 10px"
              >点击查询</a-button
            >
            <a-button
              @click="handleImport"
              type="primary"
              style="margin-left: 10px; margin-right: 10px"
              >数据导入</a-button
            >
            <a-button type="primary" @click="showModal">添加碳排因子</a-button>
          </a-form-item>
        </a-form>

        <a-table
          :data-source="mockData"
          :columns="columns"
          :pagination="pagination"
          :loading="tableLoading"
          @change="handlechange"
          style="margin-top: 10px"
        >
          <template #bodyCall>
            <template> </template>
          </template>
        </a-table>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { repoter } from "/@/api/Carbon module/Carbon accounting module/Carbon monitoring/repoter";

const isModalVisible = ref(false);
const form = ref({
  primaryType: null,
  secondaryType: null,
  tertiaryType: null,
  factorName: "",
  specification: "",
  industry: "",
  scene: "",
  co2Equivalent: "",
  factorUnit: null,
  literatureType: null,
  sourceType: null,
  publishYear: "",
  publishCountry: null,
});
const total = ref(0);
const tableLoading = ref(false); // 表格加载状态
const queryFormState = reactive({
  pageNum: 1,
  pageSize: 10,
});

const queryForm = reactive({ ...queryFormState });

const pagination = computed(() => ({
  total: total.value,
  pageSize: queryFormState.pageSize,
  current: queryFormState.pageNum,
  showTotal: (total) => `总共${total}项`,
}));
const secondaryOptions = ref([]);
const tertiaryOptions = ref([]);
const searchFactorName = ref("");
const mockData = ref([]);

const columns = [
  {
    title: "排放源名称",
    dataIndex: "SourceName",
    key: "SourceName",
    align: "center",
  },
  {
    title: "碳排放因子",
    dataIndex: "EmissionFactor",
    key: "EmissionFactor",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "Unit",
    key: "Unit",
    align: "center",
  },
  {
    title: "地区",
    dataIndex: "Region",
    key: "Region",
    align: "center",
  },
  {
    title: "版本",
    dataIndex: "Version",
    key: "Version",
    align: "center",
  },
  {
    title: "数据来源",
    dataIndex: "DataSources",
    key: "DataSources",
    align: "center",
  },
  {
    title: "描述",
    dataIndex: "Description",
    key: "Description",
    align: "center",
  },
  {
    title: "最后更新时间",
    dataIndex: "LastUpdated",
    key: "LastUpdated",
    align: "center",
  },
];
async function queryData() {
  try {
    queryForm.pageNum = queryFormState.pageNum;
    queryForm.pageSize = queryFormState.pageSize;
    const queryResult = await repoter.query(queryForm);
    mockData.value = queryResult.data.list;
    total.value = queryResult.data.total;
    console.log(queryResult.data.list);
  } catch (e) {
    smartSentry.captureError(e);
  }
}
const handlechange = (pagination, filters, sorter) => {
  queryFormState.pageNum = pagination.current;
  queryFormState.pageSize = pagination.pageSize;
  queryData();
};
const handleSubmit = () => {
  console.log("提交表单:", form.value);
  isModalVisible.value = false; // Close modal after submission
};

const handleImport = () => {
  console.log("导入数据");
};

const handleQuery = () => {
  console.log("查询因子名称:", searchFactorName.value);
};

const addPrimaryType = () => {
  console.log("新增一级类型");
};

const addSecondaryType = () => {
  console.log("新增二级类型");
};

const addTertiaryType = () => {
  console.log("新增三级类型");
};

const showModal = () => {
  isModalVisible.value = true;
};

const handleCancel = () => {
  isModalVisible.value = false;
};
onMounted(() => {
  queryData();
});
</script>

<style scoped>
.a-card {
  margin-bottom: 20px;
}
</style>
